<template>
    <div>
        <el-dialog title="自定义列" :visible.sync="dialogVisible">
             <div class="columns">
                 <div class="fl">
                     <div class="ht">
                        <b>字段列表</b>
                        <input type='checkbox' :checked="isCheckedAll" @click='checkedAll()'>全选
                    </div>
                    <div v-for='(item, index) in showColumns' :key="index" style="margin-left:30px;">
                        <input type='checkbox' :checked="item.show" @click='checkedOne(item)'>{{item.label}}
                    </div>
                 </div>
                 <div class="fr">
                    <div class="ht">
                        <b>已选择字段</b>
                    </div>
                     <ul>
                        <li v-for="(item, index) in showColumns" v-show="item.show" :key="index">{{item.label}}</li>
                     </ul>
                 </div>
             </div>
             <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="select">确 定</el-button>
             </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'CustomColumn',
    props: {
        showColumns:{
            type: Array,
            default: []
        },
    },
    
    data() {
        return {
            isCheckedAll: this.showColumns.find(i => i.show == false) ? false : true,
            dialogVisible: false,
        }
    },

    methods: {
        // 单选
        checkedOne(item) {
            item.show = !item.show
            this.isCheckedAll = this.showColumns.find(i => i.show == false) ? false : true
        },

        // 全选
        checkedAll() {
            this.isCheckedAll = !this.isCheckedAll
            if(this.isCheckedAll) {
                this.showColumns.forEach(item => { 
                    item.show = true
                })  
            }else{
                 this.showColumns.forEach(item => { 
                    item.show = false
                }) 
            }
        },
        
        // 确认     
        select() {
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped="scoped">
.columns{ display: flex;}   
.columns .ht{ margin-left: 20px; margin-bottom:10px;}
.columns .ht .ck{ margin-left:12px;}
.columns .fl{ flex:1;}
.columns .fr{ width:250px; border-left:1px solid #f1f1f1; padding-left:20px; margin-left:20px;}
.columns .fr ul{ max-height:375px; overflow-y:auto;}
.columns .fr ul li{ margin-bottom:5px;}
</style>
